<head>
    <script src="../build/index.js"></script>
</head>

<body>
    <canvas id="app"></canvas>

    <script>
        // import Component from "easycanvas/build/components";

        // window.Easycanvas = Easycanvas;
        // Easycanvas.component(Component.text, "text");

        function createCanvas (options) {
           return new Easycanvas.Painter(options);
        }

        function createSprite (options) {
           return new Easycanvas.Sprite(options);
        }


        const $app = new Easycanvas.Painter({
           el: '#app',
           width: 750,
           height: 1334
        })

        $app.start();

        const $wrap = $app.add({
            style: {
                opacity: 0.1
            }
        });
        // const $wrap = $app;

        let colorObj = {
                   0: '#0a0',
                   1: '#a11',
                   2: '#22a',
                   3: '#a33',
                   4: '#4a4',
                   5: '#55a',
                   6: '#a66',
                   7: '#7a7',
                   8: '#88a',
                   9: '#a99'
               }
        console.log($wrap)
        for (var i = 0; i < 600; i++) {
           let $box = $wrap.add({
               style: {
                   width: 700,
                   height: 80,
                   left: 20,
                   top: i*100,
                   locate: 'lt',
                   backgroundColor: colorObj[i%10] || '#999',
                   // overflow: 'hidden',
               }
           })

           $box.add({
               style: {
                   width: 100,
                   height: 50,
                   left: 5,
                   top: 5,
                   backgroundColor: '#ffffff',
                   locate: 'lt'
               }
           })
        }
    </script>
</body>

